extends ../_layout

block active
  - sidebar_active = 'spinners.html'

block content
  //- this mixin builds panel with a spinner demo
  mixin spinner-panel-manual(spinnername)
    // START panel
    .panel.panel-default
      .panel-heading
        = spinnername
      .panel-body(class="whirl #{spinnername}")
        p Suspendisse cursus, nisi eu aliquam ultricies, orci augue auctor mi, quis egestas nibh erat vitae justo. 
    // END panel

  h3 Loading Spinners

  h4.page-header Loaders.css
    small.text-muted Delightful and performance-focused pure css loading animations.

  .row
    .col-md-3
      .panel.panel-default
        .panel-heading Ball Pulse
        .panel-body.loader-demo
          .ball-pulse
            div
            div
            div
    .col-md-3
      .panel.panel-default
        .panel-heading Ball Grid Pulse
        .panel-body.loader-demo
          .ball-grid-pulse
            div
            div
            div
            div
            div
            div
            div
            div
            div
    .col-md-3
      .panel.panel-default
        .panel-heading Ball Clip Rotate
        .panel-body.loader-demo
          .ball-clip-rotate
            div
    .col-md-3
      .panel.panel-default
        .panel-heading Ball Clip Rotate Pul
        .panel-body.loader-demo
          .ball-clip-rotate-pulse
            div
            div
    .col-md-3
      .panel.panel-default
        .panel-heading Square Spin
        .panel-body.loader-demo
          .square-spin
            div
    .col-md-3
      .panel.panel-default
        .panel-heading Ball Clip Rotate Mul
        .panel-body.loader-demo
          .ball-clip-rotate-multiple
            div
            div
    .col-md-3
      .panel.panel-default
        .panel-heading Ball Pulse Rise
        .panel-body.loader-demo
          .ball-pulse-rise
            div
            div
            div
            div
            div
    .col-md-3
      .panel.panel-default
        .panel-heading Ball Rotate
        .panel-body.loader-demo
          .ball-rotate
            div
    .col-md-3
      .panel.panel-default
        .panel-heading Cube Transition
        .panel-body.loader-demo
          .cube-transition
            div
            div
    .col-md-3
      .panel.panel-default
        .panel-heading Ball Zig Zag
        .panel-body.loader-demo
          .ball-zig-zag
            div
            div
    .col-md-3
      .panel.panel-default
        .panel-heading Ball Zig Zag Deflect
        .panel-body.loader-demo
          .ball-zig-zag-deflect
            div
            div
    .col-md-3
      .panel.panel-default
        .panel-heading Ball Triangle Path
        .panel-body.loader-demo
          .ball-triangle-path
            div
            div
            div
    .col-md-3
      .panel.panel-default
        .panel-heading Ball Scale
        .panel-body.loader-demo
          .ball-scale
            div
    .col-md-3
      .panel.panel-default
        .panel-heading Line Scale
        .panel-body.loader-demo
          .line-scale
            div
            div
            div
            div
            div
    .col-md-3
      .panel.panel-default
        .panel-heading Line Scale Party
        .panel-body.loader-demo
          .line-scale-party
            div
            div
            div
            div
    .col-md-3
      .panel.panel-default
        .panel-heading Ball Scale Multiple
        .panel-body.loader-demo
          .ball-scale-multiple
            div
            div
            div
    .col-md-3
      .panel.panel-default
        .panel-heading Ball Pulse Sync
        .panel-body.loader-demo
          .ball-pulse-sync
            div
            div
            div
    .col-md-3
      .panel.panel-default
        .panel-heading Ball Beat
        .panel-body.loader-demo
          .ball-beat
            div
            div
            div
    .col-md-3
      .panel.panel-default
        .panel-heading Line Scale Pulse Out
        .panel-body.loader-demo
          .line-scale-pulse-out
            div
            div
            div
            div
            div
    .col-md-3
      .panel.panel-default
        .panel-heading Line Scale Pulse Out
        .panel-body.loader-demo
          .line-scale-pulse-out-rapid
            div
            div
            div
            div
            div
    .col-md-3
      .panel.panel-default
        .panel-heading Ball Scale Ripple
        .panel-body.loader-demo
          .ball-scale-ripple
            div
    .col-md-3
      .panel.panel-default
        .panel-heading Ball Scale Ripple Mu
        .panel-body.loader-demo
          .ball-scale-ripple-multiple
            div
            div
            div
    .col-md-3
      .panel.panel-default
        .panel-heading Ball Spin Fade Loade
        .panel-body.loader-demo
          .ball-spin-fade-loader
            div
            div
            div
            div
            div
            div
            div
            div
    .col-md-3
      .panel.panel-default
        .panel-heading Line Spin Fade Loade
        .panel-body.loader-demo
          .line-spin-fade-loader
            div
            div
            div
            div
            div
            div
            div
            div
    .col-md-3
      .panel.panel-default
        .panel-heading Triangle Skew Spin
        .panel-body.loader-demo
          .triangle-skew-spin
            div
    .col-md-3
      .panel.panel-default
        .panel-heading Pacman
        .panel-body.loader-demo
          .pacman
            div
            div
            div
            div
            div
    .col-md-3
      .panel.panel-default
        .panel-heading Ball Grid Beat
        .panel-body.loader-demo
          .ball-grid-beat
            div
            div
            div
            div
            div
            div
            div
            div
            div
    .col-md-3
      .panel.panel-default
        .panel-heading Semi Circle Spin
        .panel-body.loader-demo
          .semi-circle-spin
            div


  h4.page-header Spin Kit

  .row
    .col-md-3
      .panel.panel-default
        .panel-heading
          h5 Rotating plane
        .panel-body.loader-demo.loader-demo-sk
          .sk-rotating-plane
    .col-md-3
      .panel.panel-default
        .panel-heading
          h5 Double bounce
        .panel-body.loader-demo.loader-demo-sk
          .sk-double-bounce
            .sk-child.sk-double-bounce1
            .sk-child.sk-double-bounce2
    .col-md-3
      .panel.panel-default
        .panel-heading
          h5 Wave
        .panel-body.loader-demo.loader-demo-sk
          .sk-wave
            .sk-rect.sk-rect1
            .sk-rect.sk-rect2
            .sk-rect.sk-rect3
            .sk-rect.sk-rect4
            .sk-rect.sk-rect5
    .col-md-3
      .panel.panel-default
        .panel-heading
          h5 Wandering cubes
        .panel-body.loader-demo.loader-demo-sk
          .sk-wandering-cubes
            .sk-cube.sk-cube1
            .sk-cube.sk-cube2
    .col-md-4
      .panel.panel-default
        .panel-heading
          h5 Pulse
        .panel-body.loader-demo.loader-demo-sk
          .sk-spinner.sk-spinner-pulse
    .col-md-4
      .panel.panel-default
        .panel-heading
          h5 Chasing dots
        .panel-body.loader-demo.loader-demo-sk
          .sk-chasing-dots
            .sk-child.sk-dot1
            .sk-child.sk-dot2
    .col-md-4
      .panel.panel-default
        .panel-heading
          h5 Three bounce
        .panel-body.loader-demo.loader-demo-sk
          .sk-three-bounce
            .sk-child.sk-bounce1
            .sk-child.sk-bounce2
            .sk-child.sk-bounce3
    .col-md-4
      .panel.panel-default
        .panel-heading
          h5 Circle
        .panel-body.loader-demo.loader-demo-sk
          .sk-circle
            .sk-circle1.sk-child
            .sk-circle2.sk-child
            .sk-circle3.sk-child
            .sk-circle4.sk-child
            .sk-circle5.sk-child
            .sk-circle6.sk-child
            .sk-circle7.sk-child
            .sk-circle8.sk-child
            .sk-circle9.sk-child
            .sk-circle10.sk-child
            .sk-circle11.sk-child
            .sk-circle12.sk-child
    .col-md-4
      .panel.panel-default
        .panel-heading
          h5 Cube grid
        .panel-body.loader-demo.loader-demo-sk
          .sk-cube-grid
            .sk-cube.sk-cube1
            .sk-cube.sk-cube2
            .sk-cube.sk-cube3
            .sk-cube.sk-cube4
            .sk-cube.sk-cube5
            .sk-cube.sk-cube6
            .sk-cube.sk-cube7
            .sk-cube.sk-cube8
            .sk-cube.sk-cube9
    .col-md-4
      .panel.panel-default
        .panel-heading
          h5 Fading circle
        .panel-body.loader-demo.loader-demo-sk
          .sk-fading-circle
            .sk-circle1.sk-circle
            .sk-circle2.sk-circle
            .sk-circle3.sk-circle
            .sk-circle4.sk-circle
            .sk-circle5.sk-circle
            .sk-circle6.sk-circle
            .sk-circle7.sk-circle
            .sk-circle8.sk-circle
            .sk-circle9.sk-circle
            .sk-circle10.sk-circle
            .sk-circle11.sk-circle
            .sk-circle12.sk-circle

  h4.page-header Whirl Loaders
    small.text-muted Based on modern CSS3 animations and ready to be used in Panels

  - var spinners = ['standard', 'traditional', 'double-up', 'duo', 'blade', 'ringed', 'helicopter', 'line', 'line grow', 'line back-and-forth', 'line back-and-forth grow', 'sphere', 'sphere vertical', 'bar', 'bar follow', 'shadow', 'shadow oval', 'shadow oval right', 'no-overlay']
  // START row
  .row
    - each val in spinners
      .col-md-3
        +spinner-panel-manual(val)
  // END row

block vendor_css
  // Loaders.css
  link(rel='stylesheet', href='../vendor/loaders.css/loaders.css')
  // Spinkit
  link(rel='stylesheet', href='../vendor/spinkit/css/spinkit.css')
